<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div>
          <el-col :span="3">
            <div class="mySet">
              <el-button type="success" plain @click="notification">订阅通知</el-button>
            </div>
          </el-col>
          <el-col :span="3">
            <el-button plain>主页</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" plain @click="getSchemas">配置</el-button>
            <el-dialog title="加载模块信息" :visible.sync="schemasTableVisible" width="400px">
              <el-table :data="schemas" height="350">
                <el-table-column width="150" property="identifier" label="模块"></el-table-column>
                <el-table-column width="150" property="version" label="日期"></el-table-column>
              </el-table>
            </el-dialog>
          </el-col>
          <el-col :span="3">
            <el-button type="success" plain>业务</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="info" plain>统计</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="danger" plain>告警</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="warning" plain @click="onlytest">帮助</el-button>
          </el-col>
          <el-col :span="3">
            <div class="mySet"></div>
          </el-col>
        </div>

      </el-col>


    </el-row>
    <el-row>
      <el-col :span="3">
        <el-button type="success" @click="createDevm">创建设备</el-button>
      </el-col>
      <el-col :span="10">
        <el-select
            v-model="nodeName"
            placeholder="请选择"
            ref="autoIncrement"
            @change="chageTextColor($event,'autoIncrement')">
          <el-option v-for="(nodeName,index) in nodeList"
                     :key="index"
                     :value="nodeName['node-id']">
            <span style="float: left">{{ nodeName['node-id'] }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
                nodeName['netconf-node-topology:connection-status']
              }}</span>
          </el-option>
        </el-select>
        <el-button type="primary" @click="getNodeList">节点列表</el-button>
        <el-button type="danger" @click="deleteNode">删除节点</el-button>
      </el-col>
      <el-col :span="4">
        端口名称：
      </el-col>
      <el-col :span="4">
        <el-input v-model="tpName" class="tpClass"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="info">端口信息</el-button>
      </el-col>
    </el-row>
    <el-dialog title="创建设备" :visible.sync="configDevmFormVisible" width="500px" :close-on-click-modal="false">
      <devm-info :name="nodeName"></devm-info>
    </el-dialog>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-yellow">网元设备 - 管理模块</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple-dark">
          <el-button @click="getMe">设备信息总览</el-button>
          <el-button @click="getEqs">单板信息</el-button>
          <el-button @click="getTime">时间信息</el-button>
          <el-button size="mini" icon="el-icon-view" class="bt_border" circle @click="isShow"></el-button>
          <br>
          <el-card class="box-card" v-show="isMe">
            <div class="text item">名称： {{ me.name }}</div>
            <div class="text item">厂商： {{ me.manufacturer }}</div>
            <div class="text item">设备状态： {{ me.status }}</div>
            <div class="text item">ntp状态： {{ me["ntp-enable"] }}</div>
            <div class="text item">类型： {{ me["device-type"] }}</div>
            <div class="text item">产品名称： {{ me["product-name"] }}</div>
            <div class="text item">uuid： {{ me.uuid }}</div>
            <div class="text item">ip： {{ me["ip-address"] }}</div>
            <div class="text item">掩码： {{ me.mask }}</div>
            <div class="text item">way2： {{ me["gate-way2"] }}</div>
            <div class="text item">硬件版本： {{ me["hardware-version"] }}</div>
            <div class="text item">软件版本： {{ me["software-version"] }}</div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-button @click="getPtps">物理端口信息</el-button>
          <el-button @click="getFtps">浮动端口信息</el-button>
          <el-button @click="getCtps">连接端口信息</el-button>
        </div>
        <br>
        <div v-show="isPtp">
          <el-table :data="ptps">
            <el-table-column property="name" label="名称"></el-table-column>
            <el-table-column width="auto" property="interface-type" label="接口类型"></el-table-column>
            <el-table-column width="auto" property="laser-status" label="激光器状态"></el-table-column>
            <el-table-column width="auto" property="loop-back" label="环回类型"></el-table-column>
            <el-table-column width="150" property="layer-protocol-name" label="协议层名称"></el-table-column>
          </el-table>
        </div>
        <div v-show="isFtp">
          <el-table :data="ftps">
            <el-table-column property="name" label="名称"></el-table-column>
            <el-table-column width="150" property="layer-protocol-name" label="协议层名称"></el-table-column>
          </el-table>
        </div>
        <div v-show="isCtp">
          <el-table :data="ctps">
            <el-table-column property="name" label="名称"></el-table-column>
            <el-table-column width="auto" property="server-tp" label="服务端口"></el-table-column>
            <el-table-column width="auto" property="loop-back" label="环回类型"></el-table-column>
            <el-table-column width="150" property="layer-protocol-name" label="协议层名称"></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">3</div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-yellow-dark">详细信息 - 统计模块</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-button @click="getSession">会话信息</el-button>
        <br>
        <div>
          <el-table :data="sessions.session">
            <el-table-column property="login-time" label="登陆时间"></el-table-column>
            <el-table-column width="auto" property="source-host" label="主机地址"></el-table-column>
            <el-table-column width="auto" property="session-id" label="会话Id"></el-table-column>
            <el-table-column width="auto" property="transport" label="传输协议"></el-table-column>
            <el-table-column width="auto" property="username" label="用户名"></el-table-column>
            <el-table-column width="auto" property="in-rpcs" label="内置Rpc"></el-table-column>
            <el-table-column width="auto" property="out-notifications" label="输出通知数量"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">故障诊断 - 支撑模块</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="bg-blue-light">
          <div style="border: #e7e794">
            激光器开关
            <el-switch
                v-model="laserStatus"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
            <el-button @click="setLaser">设置</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div>单板复位</div>
      </el-col>
      <el-col :span="2">
        单板名称：
      </el-col>
      <el-col :span="4">
        <el-input v-model="eq.epName"/>
      </el-col>
      <el-col :span="2">
        复位类型：
      </el-col>
      <el-col :span="4">
        <el-select ref="selectValue1" v-model="eq.resetType" filterable placeholder="请选择">
          <el-option key="0" label="soft-reset" value="soft-reset"/>
          <el-option key="1" label="hard-reset" value="hard-reset"/>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button @click="setEqsReset">设置</el-button>
      </el-col>

    </el-row>
<!--    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-green">实时更新 - 通知模块</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">
        </div>
        &lt;!&ndash;        <el-row :span="12">&ndash;&gt;
        &lt;!&ndash;          <div class="grid-content bg-purple-dark"></div>&ndash;&gt;
        &lt;!&ndash;        </el-row>&ndash;&gt;
        &lt;!&ndash;        <el-row :span="12">&ndash;&gt;
        &lt;!&ndash;          <div class="bg-red-dark"></div>&ndash;&gt;
        &lt;!&ndash;        </el-row>&ndash;&gt;
        &lt;!&ndash;        </div>&ndash;&gt;
      </el-col>
      <el-col :span="12">
        <Listener/>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>-->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
    </el-row>
  </div>

</template>


<script>
import axios from "axios";
import MeParams from "@/components/topology/MeParams";


export default {
  components: {
    MeParams,
    // Listener
  },
  data() {
    return {
      nodeName: '',
      configDevmFormVisible: false,
      schemasTableVisible: false,
      schemas: [
        {
          "identifier": "",
          "version": "",
          "format": "",
          "namespace": "",
          "location": [
            "NETCONF"
          ]
        },
      ],
      tpName: '',
      nodeList: [{
        'node-id': '',
        'netconf-node-topology:connection-status': '',
        'netconf-node-topology:port': '',
        'netconf-node-topology:host': '',
      }],
      isMe: false,
      me: {
        "hardware-version": "",
        "ntp-enable": false,
        "eq": [
          "EQ=/shelf=1/slot=1/subslot=1/EQ="
        ],
        "uuid": "",
        "manufacturer": "",
        "software-version": "",
        "ip-address": "",
        "layer-protocol-name": [
          "acc-eth:ETH"
        ],
        "device-type": "",
        "name": "",
        "ntp-servers": {
          "ntp-server": [
            {
              "port": 0,
              "name": "hctel"
            }
          ]
        },
        "product-name": "",
        "gate-way2": "",
        "status": "",
        "mask": ""
      },
      isPtp: '',
      isFtp: '',
      isCtp: '',




      ptps: [{
        "interface-type": "",
        "laser-status": "",
        "name": "PTP=/shelf=1/slot=1/subslot=1/port=8",
        "layer-protocol-name": "",
        "acc-eth:eth-ptp-pac": {
          "mac-address": "00:00:00:00:00:00",
          "current-working-mode": "auto",
          "pause-control": true,
          "lldp-enable": false,
          "current-mtu": 1518
        },
        "loop-back": "",
        "state-pac": {
          "admin-state": "enabled"
        },
        "ctp": ["PTP=/shelf=1/slot=1/subslot=1/port=8/CTP=8"],
        "optical-power-pac": {}
      }],
      ftps: [{
        "name": "FTP=/shelf=1/slot=1/subslot=1/port=101",
        "layer-protocol-name": "acc-eth:ETH",
        "client-ctp": ["FTP=/shelf=1/slot=1/subslot=1/port=101/CTP=9"],
        "state-pac": {
          "admin-state": "enabled"
        },
        "acc-eth:eth-ftp-pac": {
          "current-mtu": 1518
        },
        "server-ctp": ["PTP=/shelf=1/slot=1/subslot=1/port=9/CTP=1"]
      }],
      ctps: [
        {
          "name": "s",
          "state-pac": {
            "admin-state": "enabled"
          },
          "layer-protocol-name": "i",
          "server-tp": "s",
          "loop-back": "terminal-loopback",
          "acc-otn:odu-ctp-pac": {
            "odu-signal-type": "i",
            "adaptation-type": "CBR_BMP",
            "ts-detail": "s",
            "pmtrail-trace-expected-rx": "s"
          },
          "acc-sdh:vc-ctp-pac": {
            "vc-type": "VC12",
            "mapping-path": "s",
            "j1-actual-tx": "s",
            "j1-expected-rx": "s"
          },
          "acc-eth:eth-ctp-pac": {
            "vlan-spec": {
              "vlan-id": [
                "1"
              ],
              "vlan-priority": "1",
              "access-action": "keep",
              "vlan-type": "s-tag"
            },
            "client-vlan-spec": {
              "vlan-id": [
                "1"
              ],
              "vlan-priority": "1",
              "access-action": "push_pop",
              "vlan-type": "s-tag"
            },
            "oam-state-pac": {
              "dm-state": "true",
              "tm-state": "true",
              "lm-state": "true",
              "cc-state": "true"
            },
            "oam-config": {
              "mep-id": "1",
              "remote-mep-id": "1",
              "meg-id": "1",
              "md-name": "1",
              "mel": "1",
              "cc-interval": "interval-100ms",
              "lm-interval": "interval-100ms",
              "dm-interval": "interval-10s"
            }
          }
        }
      ],
      //统计模块
      sessions: {
        session: [{
          "in-bad-rpcs": '',
          "in-rpcs": "",
          "login-time": "",
          "out-notifications": 39,
          "out-rpc-errors": 3,
          "session-id": 1,
          "source-host": "",
          "transport": "ietf-netconf-monitoring:netconf-ssh",
          "username": "admin",
        }]
      },


      // 故障诊断模块
      laserStatus: '',
      eq: {
        epName: 'eqname_1',
        resetType: '',
      },
      eqs: {
        "eq": [
          {
            "name": "EQ=/shelf=1/slot=1/subslot=1/EQ=",
            "plug-state": true,
            "software-version": "v1.0.8  -2020/8/7 16:50:48",
            "hardware-version": "pcb_ver:1 board_type:none",
            "ptp": [
              "PTP=/shelf=1/slot=1/subslot=1/port=9",
              "PTP=/shelf=1/slot=1/subslot=1/port=8",
              "PTP=/shelf=1/slot=1/subslot=1/port=10",
              "PTP=/shelf=1/slot=1/subslot=1/port=7"
            ],
            "eq-state": "working"
          }
        ]
      },
      test: {
        "notifications:input": {
          "notifications:stream": "NETCONF"
        }
      }

    }
  },
  methods: {

    onlytest(){

      if(!+[1,]){
        alert("这是IE浏览器");
      }else {
        alert("这不是IE浏览器");
      }



      const data = {
        totalEmelents: 100,
        list: [
          { id: 0, name: "a" },
          { id: 1, name: "b" },
          { id: 2, name: "c" },
        ]
      }

      const myList = data.list.map(item => {
        return {
          key: item.id,
          value: item.name
        }
      });


      console.log(...data.list);

      console.log(...myList);
      console.log("----------------");

      data.list = myList;
      console.log("=====================")
      console.log(data);

    },

    notification() {
      if (this.nodeName !== '') {
        for (let i = 0; i < 100; i++) {
          axios.post("/node/" + this.nodeName + "/notification", this.test).then(
              response => {
                console.log("订阅成功", response.data);
                this.$message.success("设置成功" + response.data);
              },
              error => {
                console.log("错误：", error.message);
                this.$message.error(error.message);
              }
          )
        }

      } else {
        this.$message.warning("请选择节点后再操作");
      }

    },
    getSchemas() {
      if (this.nodeName !== '') {
        axios.get('/node/' + this.nodeName + '/schemas').then(
            response => {
              console.log("请求成功", response.data);
              this.schemas = response.data;
              this.schemasTableVisible = true;
              this.$message.success("设备底层配置获取成功");
            },
            error => {
              this.$message.error(error.message);
            }
        )
      } else {
        this.$message.warning("请选择节点后再操作");
      }

    },
    //获取节点列表信息
    getNodeList() {
      axios.get('/list/nodes').then(
          response => {
            console.log("请求成功", response.data);
            this.nodeList = response.data;
            this.$message.success("设备列表信息更新成功");
          },
          error => {
            // console.log("失败！", error.message)
            this.$message.error(error.message);
          }
      )
    },
    getNode() {
      if (this.nodeName !== '') {
        axios.get('/node/' + this.nodeName).then(
            response => {
              console.log("请求成功", response.data);
              this.$message.success("设备连接配置信息获取成功");
            },
            error => {
              this.$message.error(error.message);
            }
        )
      } else {
        this.$message.warning("请选择节点后再操作");
      }

    },
    removeNode(n) {
      let li = this.nodeList;
      let index;
      for (let i = 0; i < li.length; i++) {
        if ((li[i]['node-id']).indexOf(n) > -1) {
          index = i;
          li.splice(index, 1);
        }
      }
    },
    //删除指定节点
    deleteNode() {
      if (this.nodeName !== '') {
        axios.delete("/node" + this.nodeName).then(
            response => {
              console.log("请求成功", response.data);
              this.nodeName = this.removeNode(this.nodeName);
              this.nodeName = '';
              this.$message.success("删除成功！！！");
            },
            error => {
              console.log("失败！", error.message);
              this.$message.error(error.message);
            }
        )
      } else {
        this.$message.warning("请选择节点再进行删除操作！！！！");
      }

    },
    //创建设备
    createDevm() {
      this.configDevmFormVisible = true;
      // this.title = "创建设备";
    },
    getTime() {
      axios.get("/node/" + this.nodeName + "/time").then(
          response => {
            console.log(response.data);
          },
          error => {
            console.log(error.message);
          }
      )
    },
    //显示设备状态
    chageTextColor(val, selectedRef) {
      let color = '';
      for (let lengthKey in this.nodeList.length) {
        console.log("sdsda")
        console.log(this.nodeList[lengthKey]);
      }
      // if (row['netconf-node-topology:connection-status'] === 'connected') {
      if (val === 'connected') {
        console.log(val);
        // console.log(selectedRef);
        color = '#50ea25'
      } else {
        color = '#ea3c37'
      }
      // 改变下拉框颜色值
      this.$refs[selectedRef].$el.children[0].children[0].style.color = '' + color + ''
    },
    isShow() {
      this.isMe = !this.isMe;
    },
    getMe() {
      if (this.nodeName !== '') {
        axios.get("/node/" + this.nodeName + "/me").then(
            response => {
              console.log("请求成功", response.data);
              this.$message.success("获取设备信息成功");
              this.me = response.data;
            },
            error => {
              console.log("失败！", error.message);
              this.$message.error(error.message);
            }
        )
      } else {
        this.$message.warning("请选择节点后再进行操作 ！")
      }

    },
    getEqs() {
      if (this.nodeName !== '') {
        axios.get("/node/" + this.nodeName + "/eqs").then(
            response => {
              console.log("请求成功", response.data);
              this.$message.success("获取设备信息成功");
              this.eqs = response.data;
            },
            error => {
              console.log("失败！", error.message);
              this.$message.error(error.message);
            }
        )
      } else {
        this.$message.warning("请选择节点后再进行操作 ！")
      }
    },
    viewSwitch(name) {
      switch (name) {
        case 'ptp':
          this.isPtp = true;
          this.isFtp = false;
          this.isCtp = false;
          break;
        case 'ftp':
          this.isFtp = true;
          this.isPtp = false;
          this.isCtp = false;
          break;
        case 'ctp':
          this.isCtp = true;
          this.isFtp = false;
          this.isPtp = false;
          break;
      }
    },
    getPtps() {
      this.viewSwitch('ptp');
      axios.get("/node/" + this.nodeName + "/ptps").then(
          response => {
            console.log("请求成功", response.data);
            this.ptps = response.data;
            // response.data;
          },
          error => {
            console.log("失败！", error.message)
          }
      )
    },
    getPtp() {
      axios.get("/node/" + this.nodeName + "/ptps/" + this.tpName).then(
          response => {
            console.log("请求成功", response.data);
            this.ptps = '';
            this.ptps.push(response.data);
            // response.data;
          },
          error => {
            console.log("name:", this.tpName)
            console.log("失败！", error.message)
          }
      )
    },
    getFtps() {
      this.viewSwitch('ftp');
      console.log(this.nodeName);
      axios.get("/node/" + this.nodeName + "/ftps").then(
          response => {
            console.log("请求成功", response.data);
            this.ftps = response.data;
            // response.data;
          },
          error => {
            console.log("失败！", error.message)
          }
      )
    },
    getCtps() {
      this.viewSwitch('ctp');
      axios.get("/node/" + this.nodeName + "/ctps").then(
          response => {
            console.log("请求成功", response.data);
            this.ctps = response.data;
            response.data;
          },
          error => {
            console.log("失败！", error.message)
          }
      )
    },
    //统计模块
    getSession() {
      if (this.nodeName !== '') {
        axios.get("/node/" + this.nodeName + "/session").then(
            response => {
              console.log("请求成功", response.data);
              this.$message.success("获取会话信息成功");
              this.sessions = response.data;
            },
            error => {
              console.log("失败！", error.message);
              this.$message.error(error.message);
            }
        )
      } else {
        this.$message.warning("请选择节点后再进行操作 ！")
      }
    },


    //诊断模块
    handleParameter() {
      this.tpName = escape(this.tpName);

      console.log(this.tpName);
    },
    setLaser() {
      axios.post("/node/" + this.nodeName + "/ptps/laser/" + this.tpName, this.laserStatus).then(
          response => {
            console.log("设置成功", response.data);
            this.$message.success("设置成功" + response.data);
          },
          error => {
            console.log("错误：", error.message);
            this.$message.error(error.message);
          }
      )
    },
    setEqsReset() {
      console.log(JSON.stringify(this.eq));
      axios.post("/node/" + this.nodeName + "/eqs/reset", this.eq).then(
          response => {
            console.log(response.data);
            this.$message.success("单板 " + this.eqs.epName + " 复位成功");
          },
          error => {
            console.log(error.message);
            this.$message.error(error.message);
          }
      )
    }
  },
  mounted() {
    this.$bus.$on('node-info', (data) => {
      console.log("Home页收到的信息为： ", data)
      this.nodeList = data;
    })
  }
}


</script>


<style>
.tpClass {
  width: 30px;
}

.mySet {
  min-height: 36px;
  background: #ffffff;
}

.bg-red-dark {
  min-height: 72px;
  background: #d22020;
}

.bg-blue-light {
  background: #7eadf1;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-yellow-dark {
  background: #f3e9b7;
}

.bg-green {
  background: #8dc964;
}


.bg-purple {
  background: #fac5ea;
}

.bg-yellow {
  background: #e8cdad;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  /*border-radius: 4px;*/
  min-height: 36px;
  child-align: left;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.text {
  font-size: 8px;
}

.item {
  padding: 0px 0;
}

.box-card {
  width: auto;
}

.bt_border {
  padding-top: 0px;
  border: none;
}
</style>